<template>
	<view class="home">
		<view class="text-32 text-bold">心愿游戏/对门店的改进心愿</view>
		<view class="flex align-center margin-top-40">
			<view class="text-red">*</view>
			<view class="text-28 margin-left-10">游戏名称</view>
		</view>
		<view class="bg-ff bg-shadow padding-30 radius-40 flex align-center margin-top-25">
			<input type="text" placeholder="请填写" maxlength="20" class="text-28 flex-one" v-model="data.game_name"/>
			<text class="text-28 text-99">{{data.game_name.length}}/20</text>
		</view>
		<view class="flex align-center margin-top-40">
			<view class="text-red">*</view>
			<view class="text-28 margin-left-10">详细心愿描述</view>
		</view>
		<view class="bg-ff bg-shadow padding-30 radius-40 margin-top-25">
			<textarea placeholder="请填写" v-model="data.feedback_text"></textarea>
			<view class="text-right text-28 text-99">{{data.feedback_text.length}}/20</view>
		</view>
		<view class="flex align-center margin-top-40">
			<view class="text-red">*</view>
			<view class="text-28 margin-left-10">附图（最多5张）</view>
		</view>
		<view class="flex align-center flex-wrap margin-top-25">
			<image :src="item" mode="" class="photobg" v-for="(item,index) in data.media_urls" :key="index"></image>
			<view class="photobg" v-if="data.media_urls.length<5">
				<image src="/static/board/photo.png" mode="" class="photoimg" @click="uploadImage"></image>
			</view>
		</view>
		<view class="subbtn margin-top-80" @click="getSave">
			提交
		</view>
	</view>
</template>

<script>
	import config from '../../components/hzjc/config'
	export default {
		data() {
			return {
				data: {
					media_urls: [],
					feedback_text: "",
					game_name: ""
				}
			}
		},
		methods: {
			uploadImage() {
				var that = this
				uni.chooseImage({
					count: 5, // 默认9, 设置图片的选择数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表 tempFilePaths
						uni.showLoading()
						console.log(res)
						let files = res.tempFiles.map(item => item)
						console.log(files, 'files')
						if (files.length) {
							files.forEach((item, index) => {
								uni.uploadFile({
									url: config.host + '/api/common/upload',
									filePath: item.path,
									name: 'file',
									success: (uploadFileRes) => {
										var filedata = JSON.parse(uploadFileRes.data)
										console.log(filedata)
										that.data.media_urls.push(filedata.data.fullurl)
										uni.hideLoading()
									}
								});
							})
						}

					},
					fail: (err) => {
						// 处理错误情况
						console.error(err);
					}
				});

			},
			getSave(){
				this.rq.getData('wish/addwish',{
					game_name:this.data.game_name,
					feedback_text:this.data.feedback_text,
					media_urls:this.data.media_urls.join(','),
					shop_id: uni.getStorageSync('store_id'),
				}).then(res=>{
					if(res.code==1){
						this.cn.alert('提交成功').then(res=>{
							uni.redirectTo({
								url:'/pages/my/feedbacklist'
							})
						})
					}
				})
			}
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 30rpx;
	}

	textarea {
		width: 100%;
		height: 200rpx;
	}

	.photobg {
		width: 150rpx;
		height: 150rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176, 181, 185, 0.25);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
	}
	.photobg:nth-child(4n){
		margin-right: 0;
	}

	.photoimg {
		width: 72rpx;
		height: 72rpx;
	}

	.subbtn {
		width: 100%;
		height: 88rpx;
		background: #101010;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66, 66, 67, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
</style>